<template>
  <el-drawer v-model="addDrawer" size="50%" :show-close="false" @opened="openDrawer" @close="closeDrawer">
    <template #title>
      <h2><svg-icon icon-class="list"></svg-icon><span style="padding-left: 15px">{{ formName }}</span></h2>
      <el-button type="primary" @click="confirmAndSave" :disabled="drawerLoading" v-if="!form[idName]">保存&继续填写</el-button>
      <el-button type="primary" @click="confirmClick" :disabled="drawerLoading" v-if="!(route.path.includes('dataIntegrate') || route.path.includes('achievementSearch'))">保存</el-button>
    </template>
    <template #default>
      <el-form :model="form" ref="addRef" :inline="true" :rules="formRules" label-width="160px" v-loading="drawerLoading">
        <el-row justify="space-between">
          <el-form-item label="省" prop="provinceId" v-if="provinceData.length > 0 || form.provinceId">
            <el-select v-model="form.provinceId" placeholder="请选择省" @change="chooseFormProvince" clearable>
              <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="省" v-else>
            <el-input v-model="form.province" clearable disabled></el-input>
          </el-form-item>
          <el-form-item label="市" prop="cityId" v-if="provinceData.length > 0 || form.cityId">
            <el-select v-model="form.cityId" placeholder="请选择市" @change="chooseFormCity" clearable>
              <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="市" v-else>
            <el-input v-model="form.city" clearable disabled></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="区/县" prop="countyId" v-if="provinceData.length > 0 || form.countyId">
            <el-select v-model="form.countyId" placeholder="请选择区/县" @change="chooseFormCounty" clearable>
              <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区/县" v-else>
            <el-input v-model="form.county" clearable disabled></el-input>
          </el-form-item>
          <el-form-item label="目标区编号" prop="targetRegionId">
            <el-input v-model="form.targetRegionId" placeholder="请输入目标区编号" clearable maxlength="17"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="P波速度三维切片分布图原始编号" prop="vpSliceArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.vpSliceArwid" placeholder="请输入P波速度三维切片分布图原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.vpSliceArwFileid" @uploadFile="uploadSuccess('vpSliceArwFileid', $event)"
                @delFile="deleteFile('vpSliceArwFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="S波速度三维切片分布图原始编号" prop="vsSliceArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.vsSliceArwid" placeholder="请输入S波速度三维切片分布图原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.vsSliceArwFileid" @uploadFile="uploadSuccess('vsSliceArwFileid', $event)"
                @delFile="deleteFile('vsSliceArwFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="密度三维切片分布图原始编号" prop="rhoSliceArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.rhoSliceArwid" placeholder="请输入密度三维切片分布图原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.rhoSliceArwFileid" @uploadFile="uploadSuccess('rhoSliceArwFileid', $event)"
                @delFile="deleteFile('rhoSliceArwFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="介质品质因子三维切片分布图原始编号" prop="qqSliceArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.qqSliceArwid" placeholder="请输入介质品质因子三维切片分布图原始编号" clearable
                maxlength="20"></el-input>
              <FileUpload v-model="form.pgaNsArwFileid" @uploadFile="uploadSuccess('pgaNsArwFileid', $event)"
                @delFile="deleteFile('pgaNsArwFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="加速度峰值分布图1原始编号" prop="pgaNsArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.pgaNsArwid" placeholder="请输入加速度峰值分布图1原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.pgaNsArwFileid" @uploadFile="uploadSuccess('pgaNsArwFileid', $event)"
                @delFile="deleteFile('pgaNsArwFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="加速度峰值分布图2原始编号" prop="pgaEwArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.pgaEwArwid" placeholder="请输入加速度峰值分布图2原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.pgaEwArwFileid" @uploadFile="uploadSuccess('pgaEwArwFileid', $event)"
                @delFile="deleteFile('pgaEwArwFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="加速度峰值分布图3原始编号" prop="pgaUdArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.pgaUdArwid" placeholder="请输入加速度峰值分布图3原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.pgaUdArwFileid" @uploadFile="uploadSuccess('pgaUdArwFileid', $event)"
                @delFile="deleteFile('pgaUdArwFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="速度峰值分布图1原始编号" prop="pgvNsArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.pgvNsArwid" placeholder="请输入速度峰值分布图1原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.pgvNsArwFileid" @uploadFile="uploadSuccess('pgvNsArwFileid', $event)"
                @delFile="deleteFile('pgvNsArwFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="速度峰值分布图2原始编号" prop="pgvEwArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.pgvEwArwid" placeholder="请输入速度峰值分布图2原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.pgvEwArwFileid" @uploadFile="uploadSuccess('pgvEwArwFileid', $event)"
                @delFile="deleteFile('pgvEwArwFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="速度峰值分布图3原始编号" prop="pgvUdArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.pgvUdArwid" placeholder="请输入速度峰值分布图3原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.pgvUdArwFileid" @uploadFile="uploadSuccess('pgvUdArwFileid', $event)"
                @delFile="deleteFile('pgvUdArwFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="位移峰值分布图1原始编号" prop="pgdNsAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.pgdNsAwrid" placeholder="请输入位移峰值分布图1原始编号号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.pgdNsAwrFileid" @uploadFile="uploadSuccess('pgdNsAwrFileid', $event)"
                @delFile="deleteFile('pgdNsAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="位移峰值分布图2原始编号" prop="pgdEwAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.pgdEwAwrid" placeholder="请输入位移峰值分布图2原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.pgdEwAwrFileid" @uploadFile="uploadSuccess('pgdEwAwrFileid', $event)"
                @delFile="deleteFile('pgdEwAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="位移峰值分布图3原始编号" prop="pgdUdAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.pgdUdAwrid" placeholder="请输入位移峰值分布图3原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.pgdUdAwrFileid" @uploadFile="uploadSuccess('pgdUdAwrFileid', $event)"
                @delFile="deleteFile('pgdUdAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="位移时空过程图原始编号" prop="propUAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.propUAwrid" placeholder="请输入位移时空过程图原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.propUAwrFileid" @uploadFile="uploadSuccess('propUAwrFileid', $event)"
                @delFile="deleteFile('propUAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="速度时空过程图原始编号" prop="propVAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.propVAwrid" placeholder="请输入速度时空过程图原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.propVAwrFileid" @uploadFile="uploadSuccess('propVAwrFileid', $event)"
                @delFile="deleteFile('propVAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="加速度时空过程图原始编号" prop="propAAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.propAAwrid" placeholder="请输入加速度时空过程图原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.propAAwrFileid" @uploadFile="uploadSuccess('propAAwrFileid', $event)"
                @delFile="deleteFile('propAAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="加速度谱值分布图1原始编号" prop="aaNsAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.aaNsAwrid" placeholder="请输入加速度谱值分布图1原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.aaNsAwrFileid" @uploadFile="uploadSuccess('aaNsAwrFileid', $event)"
                @delFile="deleteFile('aaNsAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="卓越周期分布图A1原始编号" prop="paNsAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.paNsAwrid" placeholder="请输入卓越周期分布图A1原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.paNsAwrFileid" @uploadFile="uploadSuccess('paNsAwrFileid', $event)"
                @delFile="deleteFile('paNsAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="加速度谱值分布图2原始编号" prop="aaEwAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.aaEwAwrid" placeholder="请输入加速度谱值分布图2原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.aaEwAwrFileid" @uploadFile="uploadSuccess('aaEwAwrFileid', $event)"
                @delFile="deleteFile('aaEwAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="U卓越周期分布图A2原始编号" prop="paEwAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.paEwAwrid" placeholder="请输入U卓越周期分布图A2原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.paEwAwrFileid" @uploadFile="uploadSuccess('paEwAwrFileid', $event)"
                @delFile="deleteFile('paEwAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="加速度谱值分布图3原始编号" prop="aaUdAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.aaUdAwrid" placeholder="请输入加速度谱值分布图3原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.aaUdAwrFileid" @uploadFile="uploadSuccess('aaUdAwrFileid', $event)"
                @delFile="deleteFile('aaUdAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="卓越周期分布图A3原始编号" prop="paUdAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.paUdAwrid" placeholder="请输入卓越周期分布图A3原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.paUdAwrFileid" @uploadFile="uploadSuccess('paUdAwrFileid', $event)"
                @delFile="deleteFile('paUdAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="速度谱值分布图1原始编号" prop="vvNsAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.vvNsAwrid" placeholder="请输入速度谱值分布图1原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.vvNsAwrFileid" @uploadFile="uploadSuccess('vvNsAwrFileid', $event)"
                @delFile="deleteFile('vvNsAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="卓越周期分布图V1原始编号" prop="pvNsAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.pvNsAwrid" placeholder="请输入卓越周期分布图V1原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.pvNsAwrFileid" @uploadFile="uploadSuccess('pvNsAwrFileid', $event)"
                @delFile="deleteFile('pvNsAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="速度谱值分布图2原始编号" prop="vVEwAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.vVEwAwrid" placeholder="请输入速度谱值分布图2原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.vvEwAwrFileid" @uploadFile="uploadSuccess('vvEwAwrFileid', $event)"
                @delFile="deleteFile('vvEwAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="卓越周期分布图V2原始编号" prop="pvEwAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.pvEwAwrid" placeholder="请输入卓越周期分布图V2原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.pvEwAwrFileid" @uploadFile="uploadSuccess('pvEwAwrFileid', $event)"
                @delFile="deleteFile('pvEwAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="速度谱值分布图3原始编号" prop="vvUdAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.vvUdAwrid" placeholder="请输入速度谱值分布图3原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.vvUdAwrFileid" @uploadFile="uploadSuccess('vvUdAwrFileid', $event)"
                @delFile="deleteFile('vvUdAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="卓越周期分布图V3原始编号" prop="pvUdAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.pvUdAwrid" placeholder="请输入卓越周期分布图V3原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.pvUdAwrFileid" @uploadFile="uploadSuccess('pvUdAwrFileid', $event)"
                @delFile="deleteFile('pvUdAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="位移谱值分布图1原始编号" prop="ddNsAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.ddNsAwrid" placeholder="请输入位移谱值分布图1原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.ddNsAwrFileid" @uploadFile="uploadSuccess('ddNsAwrFileid', $event)"
                @delFile="deleteFile('ddNsAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="卓越周期分布图D1原始编号" prop="pdNsAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.pdNsAwrid" placeholder="请输入卓越周期分布图D1原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.pdNsAwrFileid" @uploadFile="uploadSuccess('pdNsAwrFileid', $event)"
                @delFile="deleteFile('pdNsAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="位移谱值分布图2原始编号" prop="ddEwAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.ddEwAwrid" placeholder="请输入位移谱值分布图2原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.ddEwAwrFileid" @uploadFile="uploadSuccess('ddEwAwrFileid', $event)"
                @delFile="deleteFile('ddEwAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="卓越周期分布图D2原始编号" prop="pdEwAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.pdEwAwrid" placeholder="请输入卓越周期分布图D2原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.pdEwAwrFileid" @uploadFile="uploadSuccess('pdEwAwrFileid', $event)"
                @delFile="deleteFile('pdEwAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="位移谱值分布图3原始编号" prop="ddUdAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.ddUdAwrid" placeholder="请输入位移谱值分布图3原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.ddUdAwrFileid" @uploadFile="uploadSuccess('ddUdAwrFileid', $event)"
                @delFile="deleteFile('ddUdAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="卓越周期分布图D3原始编号" prop="pdUdAwrid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.pdUdAwrid" placeholder="请输入卓越周期分布图D3原始编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.pdUdAwrFileid" @uploadFile="uploadSuccess('pdUdAwrFileid', $event)"
                @delFile="deleteFile('pdUdAwrFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="备注" prop="commentInfo" style="width:100%">
            <el-input v-model="form.commentInfo" placeholder="请输入备注" :autosize="{ minRows: 5, maxRows: 10 }"
              type="textarea" show-word-limit maxlength="2147483647" clearable></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </template>
  </el-drawer>
</template>
<script setup>
import useOtherData from '@/hooks/useOtherData'
const { route, form, queryData, formName, idName,
  uploadSuccess, deleteFile,
  chooseFormProvince, chooseFormCity, chooseFormCounty,
  addRef, confirmAndSave, addDrawer, confirmClick, checkIdValid, openDrawer, closeDrawer, drawerLoading } = useOtherData()

const { provinceData, cityData, areaData } = toRefs(queryData)

const formRules = reactive({
  provinceId: [{ required: true, message: '请选择省！', trigger: 'change' }],
  cityId: [{ required: true, message: '请选择市！', trigger: 'change' }],
  countyId: [{ required: true, message: '请选择区/县！', trigger: 'change' }],
  targetRegionId: [
    { required: true, message: '请输入目标区编号!', trigger: 'blur' },
    { min: 17, max: 17, message: '长度必须为17位', trigger: 'blur' },
    { validator: checkIdValid, trigger: 'blur' },
  ]
})
</script>